import { Button, Select } from "@arco-design/web-react";
import { invoke } from "@tauri-apps/api/core";
import { useRef, useState } from "react";

const Translator = () => {
    const [transValue,setTransValue] = useState<string>("")
    //const [nedTrans,setNedTrans] = useState()
    const nedref = useRef<any>()
    const doTranslate = async() => {
        console.log(nedref.current.value)
        let result:any = await invoke("requst",{from:"en",to:"zh",text:nedref.current.value})
        setTransValue(result.tgt_text)
    }
    return (
        <>
            <div>
                <Select style={{width:400,marginRight:10,marginBottom:10}} defaultActiveFirstOption defaultValue="英语">
                    <Select.Option key='en' value="en">英语</Select.Option>
                    <Select.Option key='zh' value='zh'>中文</Select.Option>
                </Select>
                <Select style={{width:400,marginBottom:10}} defaultActiveFirstOption defaultValue="中文">
                    <Select.Option key='zh' value="zh">中文</Select.Option>
                    <Select.Option key='en' value='en'>英语</Select.Option>
                </Select>
            </div>
            <div>
                <textarea placeholder="请输入需要翻译的内容" style={{minHeight:200,width:400}} ref={nedref}/>
                <Button type="primary" onClick={doTranslate}>翻译</Button>
                <textarea style={{minHeight:200,width:400}} value={transValue}/>
            </div>
            
        </>
    )
}
export default Translator;